<template>
  <div class="info">
    <div class="top-info">
      <div v-for="(item, index) in infoList" :key="index">
        <img :src="require('@/assets/pagesImg/' + item.imgSrc)" alt="" />
        <div style="margin-left: 10px">
          <p
            style="
              font-size: 16px;
              font-family: Microsoft YaHei-Regular, Microsoft YaHei;
              font-weight: 400;
              color: #13213b;
            "
          >
            {{ item.title }}
          </p>
          <div style="margin-top: 3px">
            <span
              style="
                font-size: 30px;
                font-family: Arial-Bold, Arial;
                font-weight: bold;
                color: rgb(19, 33, 59);
              "
            >
              {{ item.number }}
            </span>
            <span
              style="
                font-size: 20px;
                font-family: Arial-Bold, Arial;
                font-weight: bold;
                color: rgb(19, 33, 59);
              "
              >人</span
            >
          </div>
        </div>
      </div>
    </div>
    <div class="eachats"><div id="main" style="height: 350px"></div></div>
    <div class="schoolInfo"><tabble :schoolData="schoolData" /></div>
  </div>
</template>
<script>
import tabble from "@/components/table/index.vue";
import { index } from "@/api/basicInformation";
export default {
  name: "BasicInformation",
  components: { tabble },
  data() {
    return {
      infoList: [
        {
          title: "志愿者数量",
          number: "",
          imgSrc: "first.png",
        },
        {
          title: "当日志愿者申请数量",
          number: "",
          imgSrc: "6767.png",
        },
        {
          title: "当日应到执勤人员",
          number: "",
          imgSrc: "6777.png",
        },
        {
          title: "当日实到执勤人员",
          number: "",
          imgSrc: "6778.png",
        },
      ],
      schoolData: {},
      list: [], // 应到
      list2: [], // 实到
      date: [
        // "2023年9月1日",
        // "2023年9月2日",
        // "2023年9月3日",
        // "2023年9月4日",
        // "2023年9月5日",
        // "2023年9月6日",
        // "2023年9月7日",
      ], // 日期
    };
  },
  mounted() {
    this.initVolunte();
  },

  methods: {
    async initVolunte() {
      let loadingInstance = this.$Loading.service({
        target: document.querySelector(".info"),
        text: "信息拼命加载中",
      });
      await index({
        ywlsh: JSON.parse(localStorage.getItem("userInfo")).user.ywlsh,
      }).then((res) => {
        if (res.code == 200) {
          console.log(res.data);
          this.schoolData = res.data.detail;
          this.infoList[0].number = res.data.count.ydrsh; // 志愿者数量
          this.infoList[1].number = res.data.count.news; // 当日志愿者申请数量
          this.infoList[2].number = res.data.count.ydrsh; // 当日应到执勤人员
          this.infoList[3].number = res.data.count.zhqsh; // 当日实到执勤人员
          res.data.week.forEach((item) => {
            this.list.push(item.yingdao);
            this.list2.push(item.shidao);
            this.date.push(item.date);
          });
          this.drawChart();
          loadingInstance.close();
        } else {
          this.$message.error(res.message);
        }
      });
    },
    initChart() {},
    initSchoolInfo() {},
    drawChart() {
      let myChart = this.$echarts.init(document.getElementById("main"));
      const option = {
        legend: {
          right: "10%",
          x: "right",
          y: "top",
          itemWidth: 6,
          itemGap: 20,
          orient: "horizontal",
          data: ["应到", "实到"],
        },
        title: [
          {
            text: "近七天执勤情况",
            textStyle: {
              color: "#126BFF",
            },
            // left: "50%",
            // textAlign: "center",
          },
          {
            text: "单位:人数",
            textStyle: {
              color: "#13213B",
              fontSize: 15,
              fontWeight: 400,

              // fontWeight: "bold",
            },
            right: "0%",
            top: "10%",
            // textAlign: "center",
          },
        ],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            lineStyle: {
              color: "#ddd",
            },
          },
          formatter: function (params) {
            // console.log(params);
            return `
            <div style='color:#126BFF'>${params[0].name}</div>
            <div style='color:#126BFF'>${params[1].seriesName}: ${params[1].data} 人</div>
            <div style='color:#F93333'> ${params[0].seriesName}: ${params[0].data} 人</div>`;
          },
          grid: {
            left: "3%",
            // right: "0%",
            bottom: "3%",
            containLabel: true,
          },
          backgroundColor: "rgba(255,255,255,1)",
          // padding: [5, 10],
          textStyle: {
            color: "#7588E4",
          },
          extraCssText: "box-shadow: 0 0 5px rgba(0,0,0,0.3)",
        },

        xAxis: {
          type: "category",
          data: this.date, // 需要改成接口数据 返回的日期
          boundaryGap: false,
          splitLine: {
            show: false,
            interval: "auto",
            lineStyle: {
              color: ["#D4DFF5"],
            },
          },
          axisTick: {
            show: false,
          },
          axisLine: {
            lineStyle: {
              color: "#609ee9",
            },
          },
          axisLabel: {
            margin: 10,
            textStyle: {
              fontSize: 14,
              color: "#333333",
            },
          },
        },
        yAxis: {
          type: "value",
          splitLine: {
            show: false,
            lineStyle: {
              color: ["#D4DFF5"],
            },
          },
          boundaryGap: true,
          axisTick: {
            show: false,
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: "#609ee9",
            },
          },
          axisLabel: {
            margin: 10,
            textStyle: {
              fontSize: 14,
              color: "#333333",
            },
          },
        },
        series: [
          {
            name: "应到",
            type: "line",
            smooth: true,
            // showSymbol: false,
            // symbol: "circle",
            symbolSize: 10, //尺寸
            data: this.list, // 需要改成接口数据
            textStyle: {
              color: "#13213B",
              fontSize: 13,
              fontWeight: 400,

              // fontWeight: "bold",
            },
            areaStyle: {
              normal: {
                color: this.$echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: "rgba(249, 51, 51, 0.20)",
                    },
                    {
                      offset: 1,
                      color: "rgba(249, 51, 51, 0)",
                    },
                  ],
                  false
                ),
              },
            },
            itemStyle: {
              normal: {
                color: "#F93333",
                symbol: "circle",
                symbolSize: 6,
              },
            },
            lineStyle: {
              normal: {
                width: 3,
              },
            },
          },
          {
            name: "实到",
            type: "line",
            smooth: true,
            // showSymbol: false,
            // symbol: "circle",
            symbolSize: 10,
            data: this.list2, // 需要改成接口数据
            textStyle: {
              color: "#13213B",
              fontSize: 13,
              fontWeight: 400,

              // fontWeight: "bold",
            },
            areaStyle: {
              normal: {
                color: this.$echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: "rgba(18, 107, 255, 0.20)",
                    },
                    {
                      offset: 1,
                      color: "rgba(18, 107, 255, 0)",
                    },
                  ],
                  false
                ),
              },
            },
            itemStyle: {
              normal: {
                color: "#126BFF",
                symbol: "circle",
                symbolSize: 6,
              },
            },
            lineStyle: {
              normal: {
                width: 3,
              },
            },
          },
        ],
      };
      myChart.setOption(option);
      // myChart.resize();
      // let that = this;
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },
    initEacharts() {
      console.log(this.option);
      this.option.series[0].data = this.list;
    },
  },
  created() {},
};
</script>
<style lang="scss" scoped>
.top-info {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.top-info > div {
  display: flex;
  // width: 24.75rem;
  width: 24%;
  height: 100px;
  // border: 1px red solid;
  border-radius: 10px;
  background-color: white;
  align-items: center;
  padding: 10px;
  box-sizing: border-box;
  margin-bottom: 10px;
}
.top-info > div img {
  width: 77px;
  height: 75px;
}
.top-info > div > div {
  // border: 1px red solid;
  display: flex;
  flex: 1;
  text-align: left;
  vertical-align: middle;
  height: 100px;
  align-items: flex-start;
  flex-direction: column;
  justify-content: center;
}
.eachats {
  border-radius: 15px;
  background-color: white;
  box-sizing: border-box;
  margin: 20px 0 20px 0;
  padding: 20px;
  height: 350px;
}
.schoolInfo {
  box-sizing: border-box;
  background-color: white;
  padding: 15px;
  border-radius: 15px;
}
</style>
